<template>
  <el-dialog
    :visible.sync="isShow"
    destroy-on-close
    :title="title"
    width="80%"
    top="60px"
    :close-on-click-modal="false"
  >
    <columnLayout title="产品基本信息" border>
      <el-form
        ref="form"
        slot="content"
        v-loading="loading"
        :model="fields"
        :rules="rules"
        label-width="95px"
      >
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="产品分类:" prop="typeId">
              <el-cascader
                v-model="fields.typeId"
                size="small"
                style="width: 100%"
                @change="changeType"
                :options="typeList"
                :props="{
                  label: 'name',
                  value: 'id',
                  children: 'childrens',
                  emitPath: false,
                }"
                clearable
                placeholder="请选择产品分类"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品名称:" prop="name">
              <el-input
                v-model.trim="fields.name"
                autocomplete="off"
                size="small"
                placeholder="请输入产品名称"
                maxlength="25"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品编码:" prop="code">
              <el-input
                v-model.trim="fields.code"
                autocomplete="off"
                size="small"
                placeholder="请输入产品编码"
                maxlength="6"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计量类型:" prop="unitType">
              <el-select
                v-model="fields.unitType"
                style="width: 100%"
                clearable
                size="small"
                placeholder="请选择计量类型"
                :loading="loading"
              >
                <el-option
                  v-for="item in unitTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单位:" prop="unit">
              <el-select
                style="width: 100%"
                v-model="fields.unit"
                filterable
                clearable
                size="small"
                placeholder="请选择单位"
                :loading="loading"
              >
                <el-option
                  v-for="item in unitJList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销项税率%:" prop="saleTax">
              <el-input
                v-model.trim="fields.saleTax"
                autocomplete="off"
                size="small"
                placeholder="请输入销项税率"
                maxlength="25"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="进项税率%:" prop="purchaseTax">
              <el-input
                v-model.trim="fields.purchaseTax"
                autocomplete="off"
                size="small"
                placeholder="请输入进项税率"
                maxlength="25"
              />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="备注:" prop="comment">
              <el-input
                type="textarea"
                :rows="1"
                v-model.trim="fields.comment"
                autocomplete="off"
                size="small"
                placeholder="请输入备注"
                maxlength="200"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="上传附件:">
              <upload-file action="/" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </columnLayout>
    <columnLayout title="SKU列表">
      <div slot="column-actioons">
        <el-tooltip content="添加SKU信息" placement="top" effect="light">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-plus"
            @click="addSku()"
          ></el-button>
        </el-tooltip>
        <el-button size="mini" icon="el-icon-upload2">导入</el-button>
        <el-button size="mini" icon="el-icon-download">导出</el-button>
      </div>
      <vxe-grid
        ref="table"
        :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
        border
        size="mini"
        :columns="tableColumn"
        :data="fields.skuData"
        resizable
        align="left"
        show-overflow
        show-header-overflow
        slot="content"
      >
        <template #operation="{ row, rowIndex }">
          <el-tooltip content="删除" placement="top">
            <vxe-button
              size="mini"
              icon="el-icon-delete"
              status="danger"
              @click="deleteSku(row, rowIndex)"
            />
          </el-tooltip>
          <el-tooltip content="复制" placement="top">
            <vxe-button
              size="mini"
              status="primary"
              icon="el-icon-document-copy"
              @click="copySku(row, rowIndex)"
            ></vxe-button>
          </el-tooltip>
        </template>
        <template #uploadFile="{ row, rowIndex }">
          <img
            src="https://zhaowan-dev.oss-cn-shenzhen.aliyuncs.com/old/%E5%9B%BE%E7%89%871.png"
            style="width: 70%"
          />&nbsp;
        </template>
      </vxe-grid>
    </columnLayout>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="loading" size="small" @click="closePage"
        >取消</el-button
      >
      <el-button
        :loading="loading"
        type="primary"
        size="small"
        @click="onOkBtnClick"
        >保存</el-button
      >
    </div>
    <bomPage v-if="bomPage" v-model="bomPage" />
  </el-dialog>
</template>

<script>
import bomPage from './bomPage'
import columnLayout from '@/components/columnLayout'
import uploadFile from '@/components/uploadFile'
export default {
  components: {
    bomPage,
    columnLayout,
    uploadFile,
  },
  props: {
    value: {
      type: Object,
      default: () => Object.create({}),
    },
  },
  data() {
    let that = this
    return {
      loading: false,
      isShow: true,
      bomPage: null,
      dialog: false,
      tableColumn: [],
      unitJList: [
        { label: '件', value: '件' },
        { label: 'KG', value: 'KG' },
        { label: 'mm', value: 'mm' },
      ],
      unitZList: [{ label: 'KG', value: 'KG' }],
      unitRList: [{ label: 'L', value: 'L' }],
      projectList: [
        { label: '澳康达-园区', value: '1' },
        { label: '融创-3-3-12', value: '2' },
      ],
      fields: {
        comment: '',
      },
      typeList: [
        {
          id: '1d61ec1791102f45f0f52b52e2ab6b7b',
          pid: null,
          name: '成品',
          code: 'cp',
          createTime: '2020-08-23 17:25:50',
          updateTime: '2020-08-23 17:32:34',
          childrens: [
            {
              id: 'hj',
              pid: '1d61ec1791102f45f0f52b52e2ab6b7b',
              name: '桁架',
              code: 'hj',
              formTemplate: 'hj',
              skuTemplate: 'hj',
              createTime: '2020-08-23 17:31:04',
              updateTime: '2020-11-29 00:23:04',
            },
            {
              id: 'gj',
              pid: '1d61ec1791102f45f0f52b52e2ab6b7b',
              name: '箍筋',
              code: 'gj',
              formTemplate: 'gj',
              skuTemplate: 'gj',
              createTime: '2020-08-23 17:30:58',
              updateTime: null,
            },
            {
              id: 'bmb',
              pid: '1d61ec1791102f45f0f52b52e2ab6b7b',
              name: '边模板',
              code: 'bmb',
              formTemplate: '',
              skuTemplate: '',
              createTime: '2020-08-23 17:30:58',
              updateTime: null,
            },
          ],
        },
        {
          id: 'ycl',
          pid: null,
          name: '原材料',
          code: 'ycl',
          createTime: '2020-08-23 17:25:50',
          updateTime: '2020-08-23 17:32:34',
          childrens: [
            {
              id: 'ycl-gj',
              pid: 'ycl',
              name: '钢筋',
              code: 'ycl-gj',
              createTime: '2020-08-23 17:31:04',
              updateTime: '2020-11-29 00:23:04',
            },
            {
              id: 'gb',
              pid: 'ycl',
              name: '钢板',
              code: 'gb',
              createTime: '2020-08-23 17:30:58',
              updateTime: null,
            },
          ],
        },
      ],
      unitTypeList: [
        { label: '计件', value: 'jj' },
        { label: '计重', value: 'jz' },
        { label: '计长度', value: 'jc' },
      ],
      rules: {
        name: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur',
          },
        ],
        unitType: [
          {
            required: true,
            message: '请选择计量类型',
            trigger: 'blur',
          },
        ],
        typeId: [
          {
            required: true,
            message: '请选择产品分类',
            trigger: 'blur',
          },
        ],
        code: [
          {
            required: true,
            message: '请输入编码',
            trigger: 'blur',
          },
        ],
        specs: [
          {
            required: true,
            message: '请输入规格',
            trigger: 'blur',
          },
        ],
        unit: [
          {
            required: true,
            message: '请输入单位',
            trigger: 'blur',
          },
        ],
      },
      title: '产品新增',
    }
  },
  watch: {
    isShow: function () {
      this.$emit('input', null)
    },
  },
  created() {
    if (null == (this.value.id || null)) {
      this.title = '产品新增'
      this.fields.bomList = []
      this.fields.skuData = []
    } else {
      this.title = '产品编辑'
      this.fields = this.value
      this.getSkuHeader(this.fields.typeId)
    }
  },
  computed: {},
  methods: {
    onOkBtnClick() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          if (null == (this.value.id || null)) {
            this.$notify({
              title: '保存成功',
              type: 'success',
              duration: 1500,
            })
            this.$emit('colseDialog')
          } else {
            this.$notify({
              title: '保存成功',
              type: 'success',
              duration: 1500,
            })
            this.$emit('colseDialog')
          }
        }
      })
    },
    closePage() {
      this.$emit('colseDialog')
    },
    showBomPage(row, index) {
      console.log('BOM行序号', index)
      this.bomPage = {}
    },
    changeType(value) {
      this.getSkuHeader(value)
      this.fields.skuData = []
    },
    getSkuHeader(type) {
      switch (type) {
        case 'gj':
          this.tableColumn = [
            {
              type: 'seq',
              title: '序号',
              width: '5%',
              align: 'center',
            },
            {
              field: 'zjjb',
              title: '直径级别',
              align: 'center',
              editRender: { name: 'input' },
            },
            {
              field: 'twxx',
              title: '钢筋简图',
              align: 'center',
              slots: {
                default: 'uploadFile',
              },
            },
            {
              field: 'bjjg',
              title: '边角结构',
              editRender: { name: 'input' },
            },

            {
              field: 'bzxx',
              title: '备注信息',
              editRender: { name: 'input' },
            },
            {
              title: '操作',
              width: '10%',
              align: 'center',
              slots: {
                default: 'operation',
              },
            },
          ]
          break
        case 'hj':
          this.tableColumn = [
            {
              type: 'seq',
              title: '序号',
              width: '5%',
              align: 'center',
            },
            {
              field: 'xinghao',
              title: '型号',
              editRender: { name: 'input' },
            },
            {
              field: 'height',
              title: '桁架高度mm',
              editRender: { name: 'input' },
            },
            {
              field: 'sfx',
              title: '上弦  腹杆 下弦 ',
              editRender: { name: 'input' },
            },
            {
              field: 'lbhd',
              title: '楼板厚度mm',
              editRender: { name: 'input' },
            },
            {
              title: '操作',
              width: '10%',
              align: 'center',
              slots: {
                default: 'operation',
              },
            },
          ]
          break
        case 'gb':
          this.tableColumn = [
            {
              type: 'seq',
              title: '序号',
              width: '5%',
              align: 'center',
            },
            {
              field: 'caizhi',
              title: '材质',
              editRender: { name: 'input' },
            },
            {
              field: 'changjai',
              title: '厂家',
              editRender: { name: 'input' },
            },
            {
              field: 'guige',
              title: '规格',
              editRender: { name: 'input' },
            },
            {
              field: 'xinceng',
              title: '锌层',
              editRender: { name: 'input' },
            },
            {
              title: '操作',
              width: '10%',
              align: 'center',
              slots: {
                default: 'operation',
              },
            },
          ]
          break
        case 'ycl-gj':
          this.tableColumn = [
            {
              type: 'seq',
              title: '序号',
              width: '5%',
              align: 'center',
            },
            {
              field: 'changjai',
              title: '厂家',
              editRender: { name: 'input' },
            },
            {
              field: 'gangpaihao',
              title: '钢牌号',
              editRender: { name: 'input' },
            },
            {
              field: 'jmmj',
              title: '截面面积',
              editRender: { name: 'input' },
            },
            {
              field: 'qddj',
              title: '强度等级',
              editRender: { name: 'input' },
            },
            {
              title: '操作',
              width: '10%',
              align: 'center',
              slots: {
                default: 'operation',
              },
            },
          ]
          break
        case 'bmb':
          this.tableColumn = [
            {
              type: 'seq',
              title: '序号',
              width: '5%',
              align: 'center',
            },
            {
              field: 'code',
              title: 'code',
              editRender: { name: 'input' },
            },
            {
              field: 'A',
              title: 'A',
              editRender: { name: 'input' },
            },
            {
              field: 'B',
              title: 'B',
              editRender: { name: 'input' },
            },
            {
              field: 'hmm',
              title: 'H(mm)',
              editRender: { name: 'input' },
            },
            {
              field: 't2',
              title: 't(2.0)',
              editRender: { name: 'input' },
            },
            {
              field: 'zongchang',
              title: '总长(m)',
              editRender: { name: 'input' },
            },
            {
              title: '操作',
              width: '10%',
              align: 'center',
              slots: {
                default: 'operation',
              },
            },
          ]
          break
        case null:
          this.tableColumn = []
          break
      }
    },
    addSku() {
      var typeId = this.fields.typeId
      if (typeId) {
        if (
          typeId === 'hj' ||
          typeId === 'gj' ||
          typeId === 'gb' ||
          typeId === 'ycl-gj' ||
          typeId === 'bmb'
        ) {
          var sku = {}
          this.fields.skuData.push(sku)
        } else {
          this.$message({
            message: '请选择产品分类',
            type: 'error',
          })
        }
      } else {
        this.$message({
          message: '请选择产品分类',
          type: 'error',
        })
      }
    },
    deleteSku(row, index) {
      this.$confirm('确定删除该数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => this.fields.skuData.splice(index, 1))
    },
    removefile(index) {
      this.fields.fileList.splice(index, 1)
    },
    showFile(path) {
      window.open(path, '_blank')
    },
    copySku(val, rowIndex) {
      var newRow = JSON.parse(JSON.stringify(val))
      //删除对应的属性，否则会影响序号
      this.$delete(newRow, '_X_ID')
      this.fields.skuData.push(newRow)
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss">
.vxe-dropdown--panel {
  z-index: 2010 !important;
}
//日期框
.vxe-input--panel.type--date,
.vxe-input--panel.type--month,
.vxe-input--panel.type-- week,
.vxe-input--panel.type--year {
  z-index: 9998 !important;
}
//选择框
.vxe-select--panel {
  z-index: 9997 !important;
}
</style>
